<template>
  <div class="box">
    <h1>基本信息</h1>
    <el-card>
      <el-row>
        <div class="userInfo">
          <span class="userLabel">用户头像</span>
          <el-upload
            class="avatar-uploader"
            :action="url"
            :headers="headers"
            :data="uploadParams"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <!-- :before-upload="beforeAvatarUpload" -->
            <img v-if="imageUrl" :src="imageUrl" class="avatar"
                 style="width: 100px;height: 100px;border-radius: 50%"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </el-row>
      <el-row>
        <div>
          <span class="userLabel">昵称</span>
          <el-input v-model="user.name" placeholder="请输入昵称" style="width: 70%;" @input="updateStatus"/>
        </div>
      </el-row>
      <el-row>
        <div>
          <span class="userLabel">账号</span>
          <el-input v-model="user.username" style="width: 70%;" disabled/>
        </div>
      </el-row>
      <el-row>
        <div>
          <span class="userLabel">注册时间</span>
          <el-input v-model="user.createDate" style="width: 70%;" disabled/>
        </div>
      </el-row>
      <el-row>
        <div>
          <el-button round style="margin-left: 100px;background: #553f34;color: white;padding: 15px 40px"
                     @click="updateSysUser" :disabled="forbidden">修改
          </el-button>
        </div>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  import sessionUtil from '../../../utils/sessionUtil'

  export default {
    name: 'userInfo',
    data () {
      return {
        user: sessionUtil.session.get('user'),
        imageUrl: this.$dataUtils.baseFileUrl + sessionUtil.session.get('user').headImgUrl,
        baseFileUrl: this.$dataUtils.baseFileUrl,
        url: this.$dataUtils.baseUrl + '/upload/uploadPhoto',
        headers: {
          accessToken: sessionUtil.session.get('token'),
        },
        uploadParams: {
          type: 100,
        },
        forbidden: true
      }
    },
    mounted () {
      this.getSysUser()
    },
    methods: {
      handleAvatarSuccess (res, file) {
        let data = file.response
        if (data.code != 200) {
          this.$message.error(data.msg)
          return
        }
        this.imageUrl = URL.createObjectURL(file.raw)
        this.user.headImgUrl = data.data.saveUrls
        this.forbidden = false
      },
      updateStatus () {
        this.forbidden = false
      },
      updateSysUser () {
        this.$dataUtils.updateSysUser(this.user).then((res) => {
          let data = res.data
          if (data.code === 200) {
            sessionUtil.session.set('user', this.user)
            this.getSysUser()
            this.$message.success('修改成功')
            this.forbidden = true
          } else {
            this.$message.error(data.msg)
          }
        }, (err) => {
          this.$message.error('服务器异常')
        })
      },
      getSysUser () {
        let params = {id: sessionUtil.session.get('user').id}
        this.$dataUtils.getSysUser(params).then((res) => {
          let data = res.data
          console.log(data)
          if (data.code === 200) {
            this.$store.state.user = data.data.sysUser
          }
        }, (err) => {
          this.$message.error('服务器异常')
        })
      }
    }
  }
</script>

<style scoped>
  .userInfo {
    display: flex;
    align-items: center;
  }

  .userLabel {
    margin-right: 25px;
    font-weight: bold;
    width: 65px;
    display: inline-block;
    text-align-last: justify;
  }

  .el-row {
    margin-bottom: 50px;
  }

  .avatar-uploader .avatar-uploader-icon {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader {
    text-align: left;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
    border-radius: 6px;
  }
</style>
